<template>
  <el-container style="min-height: 100vh;">
    <el-header height="64px" style="position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;box-shadow:0 2px 8px #f0f1f2;display:flex;align-items:center;justify-content:space-between;padding:0 32px;">
      <div style="display:flex;align-items:center;">
        <img src="/logo.png" alt="logo" style="width:40px;height:40px;border-radius:8px;margin-right:12px;" />
        <span style="font-size:20px;font-weight:bold;color:#222;">曹氏鸭脖加盟流程系统</span>
      </div>
      <div class="user-bar">
        <el-avatar src="/logo.png" size="small" style="margin-right:8px;" />
        <span style="margin-right:8px;">{{ userStore.username }}</span>
        <span>{{ getUserRoleName() }}</span>
        <el-button type="text" @click="logout" style="margin-left:8px;">退出登录</el-button>
      </div>
    </el-header>
    <el-container style="margin-top:64px;">
      <el-aside width="220px" style="background: #f5f7fa; height: calc(100vh - 64px); position: fixed; left: 0; top: 64px; z-index: 10; box-shadow: 2px 0 8px #f0f1f2;">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" router>
          <el-menu-item index="/home">
            <span>首页</span>
          </el-menu-item>
          <el-menu-item v-if="userStore.roleCode == -1 || userStore.roleCode == 3" index="/user/userdata">
            <span>加盟数据</span>
          </el-menu-item>
          <el-menu-item v-if="userStore.roleCode == 0 || userStore.roleCode == 3" index="/user/store-list">
            <span>证件收集</span>
          </el-menu-item>
          <el-menu-item v-if="userStore.roleCode == 1 || userStore.roleCode == 3" index="/employee/type1">
            <span>基础配置</span>
          </el-menu-item>
          <el-menu-item v-if="userStore.roleCode == 2 || userStore.roleCode == 2 || userStore.roleCode == 3" index="/employee/type2">
            <span>开业设置</span>
          </el-menu-item>
          <el-menu-item v-if="userStore.roleCode == 3" index="/employee/manage">
            <span>员工管理</span>
          </el-menu-item>
          <el-menu-item v-if="userStore.roleCode == 4 || userStore.roleCode == 3" index="/old-store-manage">
            <span>老店管理</span>
          </el-menu-item>
          <el-menu-item v-if="userStore.roleCode == -1 || userStore.roleCode == 3" index="/store-manage">
            <span>门店管理</span>
          </el-menu-item>
          <el-menu-item  v-if="userStore.roleCode == 3" index="/log">
            <span>流程日志</span>
          </el-menu-item>
          <el-menu-item v-if="showGroupBuyManage" index="/groupbuy-manage">
            <span>团购管理</span>
          </el-menu-item>
          <el-menu-item v-if="userStore.roleCode == 3" index="/employee/join-store">
            <span>加盟门店</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main :style="'margin-left:220px; min-height:calc(100vh - 64px); overflow:auto;'">
        <template v-if="activeMenu === '/home'">
          <div style="height:calc(100vh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;">
            <img src="/logo-brand.jpg" alt="曹氏品牌" style="height:180px;width:auto;margin-bottom:32px;" />
            <div style="font-size:28px;font-weight:bold;color:#409EFF;">欢迎使用曹氏加盟系统</div>
          </div>
        </template>
        <template v-else>
        <router-view />
        </template>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '../store/user';
import { ElMessage } from 'element-plus';
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const activeMenu = computed(() => route.path);
const showGroupBuyManage = ref(false);

function getUserRoleName() {
  switch (userStore.roleCode) {
    case 0:
      return '';
    case 1:
      return '员工1';
    case 2:
      return '员工2';
    case 3:
      return '管理员';
    default:
      return '';
  }
}

async function checkIsType5() {
  if (Number(userStore.roleCode) === 3) {
    showGroupBuyManage.value = true;
    return;
  }
  if (!userStore.userId) return;
  const res = await fetch(`http://121.43.176.9:8090/api/employee/is-type5?employeeId=${userStore.userId}`).then(r => r.json());
  showGroupBuyManage.value = res.code === 200 && res.data === true;
}

onMounted(() => {
  checkIsType5();
});

function logout() {
  userStore.logout();
  ElMessage.success('已退出登录');
  router.replace('/');
}
</script>

<style scoped>
.user-bar {
  display: flex;
  align-items: center;
}
</style> 